import React, { Component } from 'react'
import PropTypes from 'prop-types'

import './list.css'
import Item from '../Item/Item'

export default class List extends Component {
  static propTypes = {
    comments: PropTypes.array.isRequired,
    removeComment: PropTypes.func.isRequired
  }

  render() {
    const display = this.props.comments.length ? 'none' : 'block';

    return (
      <div className="col-md-8">
        <h3 className="reply">评论回复：</h3>
        <h2 style={{ display }}>暂无评论，点击左侧添加评论！！！</h2>
        <ul className="list-group">
          {
            this.props.comments.map( (comment, index) => {
              return <Item 
                        key={ comment.id } 
                        comment={ comment } 
                        index= {index}
                        removeComment = { this.props.removeComment }
                      />
            } )
          }
        </ul>
      </div>
    )
  }
}
